Beispiel: Eine grundlegende E-Mail, Schritt für Schritt — 2. Den E-Mail-Inhalt gestalten

Im vorherigen Schritt wurde eine neue E-Mail erstellt.

Jetzt werden wir dieser E-Mail Inhalte hinzufügen: eine Kopfzeile, einen Textkörper und eine Fußzeile.

Hinweis: Es gibt verschiedene Möglichkeiten, den Inhalt der E-Mail zu gestalten. Wir zeigen nur eine Möglichkeit für jeden Abschnitt.

Content Header

Für den Kopfzeilen-Inhalt (d.h. ein Navigationsabschnitt am Anfang des E-Mail-Inhalts, der nichts mit der ‚E-Mail-Kopfzeile‘ zu tun hat) fügen wir eine zweispaltige Zeile ein:

Eine kleine Spalte auf der linken Seite, die einen „Parana"-Link zur Homepage des Parana-Webshops enthält.
Eine breitere Spalte auf der rechten Seite, die drei Links zu bestimmten Bereichen des Parana-Webshops enthält: Mode, Heim und Elektro.

Gehen Sie wie folgt vor:

Ziehen Sie eine ‚zweispaltige‘ Zeilenkomponente aus den Komponenten auf der rechten Seite in den E-Mail-Designbereich, und zwar in den Kopfbereich der E-Mail.
Klicken Sie auf das blaue Stiftsymbol der hinzugefügten ‚zweispaltigen‘ Zeilenkomponente, um ihre Eigenschaften anzuzeigen. Ändern Sie das ‚Spaltenbreitenverhältnis‘ auf 14
Ziehen Sie in der linken Spalte (dort, wo ‚Inhalt hier ablegen‘ steht, wenn Sie mit dem Mauszeiger darüber fahren) eine ‚Text‘-Komponente von rechts (aus dem Abschnitt ‚Inhalt‘) und legen Sie sie ab.
Ziehen Sie in der rechten Spalte (dort, wo ‚Inhalt hier ablegen‘ steht, wenn Sie mit dem Mauszeiger darüber fahren) eine weitere ‚Text‘-Komponente von rechts (aus dem Abschnitt ‚Inhalt‘) und legen Sie sie ab.

Hinweis: Wenn Sie eine Zeile entfernen möchten, können Sie mit dem Mauszeiger über die Zeile fahren und auf das blaue Papierkorbsymbol klicken (es wird empfohlen, die Zeile mit dem Link ‚Webversion‘ beizubehalten, da das Löschen zu Fehlern bei der späteren Erstellung der Journey führen kann).

Ihr Entwurf sieht nun wie folgt aus:

Klicken Sie in der linken Spalte, um Text hinzuzufügen:
Fügen Sie folgenden Text in Großbuchstaben ein: PARANA
Fügen Sie in die rechte Spalte die folgenden Texte ein (mit einigen Leerzeichen dazwischen): Mode, Heim, Elektro

Ändern Sie die Schriftart der Texte in Tahoma und die Schriftgröße in 18px.

Richten Sie den PARANA-Text mittig aus.

Klicken Sie auf das blaue Stiftsymbol, um die Eigenschaften der Zeile anzuzeigen, und klicken Sie dann auf den Stift rechts im Abschnitt ‚Stil‘ der Eigenschaften, um den Stil zu bearbeiten.

Fügen Sie am oberen Rand der Zeile einen Innenabstand hinzu, damit der Text vertikal ausgerichtet wird und in der Mitte der Zeile erscheint.
Fügen Sie dafür einen Eintrag zu dem ‚benutzerdefinierten Stil‘ hinzu, der den mittleren Abschnitt des Pop-ups darstellt, etwa so: padding-top: 20 px.
Klicken Sie auf ‚Ok‘, um das Popup-Fenster zu schließen und den benutzerdefinierten Stil anzuwenden.

Dies führt zu einem zusätzlichen Abstand am oberen Innenrand der Zeile:

Ändern Sie die Hintergrundfarbe der Zeile in #3bbec0 (Sie können einen Hex-Farbcode eingeben oder einfach eine Farbe aus dem visuellen Farbwähler auswählen):

Ändern Sie die Textfarbe des Textes in den beiden Spalten in Weiß (#ffffff), indem Sie einfach den Text und die gewünschte Farbe auswählen:

Klicken Sie auf ‚Übernehmen‘.

Ihr E-Mail-Design sieht nun wie folgt aus:

Fügen wir nun Links zu den Texten hinzu, so dass die E-Mail-Empfänger von der E-Mail aus zu Ihrem Webshop navigieren können.

Dieses Video zeigt, wie man einen Link zu dem ‚PARANA'-Text hinzufügt, der auf die URL des Webshops abzielt:

Wiederholen Sie diesen Vorgang, um Links zu ‚Mode', ‚Heim' und ‚Elektro' hinzuzufügen.
Anstatt auf die Startseite des Webshops zu verlinken (z.B. https://parana.selligent.com/shop/index.aspx), verlinken Sie jede Kategorie mit der entsprechenden Webseite (z.B. https://parana.selligent.com/shop/default.aspx?CATIDL2=22)

Hinweis: Alle Links werden im Abschnitt ‚Links‘ sichtbar (nach einem Klick auf dieses Symbol oben rechts im Content-Editor ):

Die Kopfzeile der E-Mail ist jetzt fertig.
Kommen wir nun zum Inhalt des Textes.

Hinweis: Vergessen Sie nicht, Ihre E-Mail regelmäßig zu speichern!

Content Body

Der Textkörper-Inhalt, den wir erstellen wollen, sollte aus einem Bild und Text bestehen.

Da sowohl das Bild als auch der Text die gesamte Breite des Textkörpers einnehmen, ziehen wir eine einspaltige Zeile von rechts auf die Entwurfsfläche im Textkörperbereich.
Dann fügen wir innerhalb der einspaltigen Zeile eine Bildkomponente und darunter eine Textkomponente ein.
Wählen Sie in den Bildeigenschaften das richtige Bild aus (laden Sie es ggf. in die Bibliothek hoch).
Fügen Sie den Text (wie in der obigen Abbildung gezeigt) unter dem Bild hinzu.

Legen Sie in den Bildeigenschaften einen Link fest, damit die E-Mail-Empfänger auf das Bild klicken können, um zu Ihrem Webshop zu navigieren.
Sie können einen neuen Link definieren oder einen vorhandenen aus der Liste auswählen.

Das ist alles für den Inhalt des Textkörpers.
Kommen wir nun zur Fußzeile.

Content Footer

Als Fußzeile möchten wir eine Zeile mit einigen Symbolen für soziale Medien auf der linken Seite und Copyright-Informationen zusammen mit einem Link zum Abbestellen auf der rechten Seite.

Eine Fußzeile ist standardmäßig vorhanden. Sie besteht aus einer einzigen Spalte. Da wir stattdessen eine zweispaltige Zeile wünschen, entfernen wir die Standard-Fußzeile, indem wir mit dem Mauszeiger darüber fahren und auf das blaue Mülleimersymbol klicken.

Ziehen Sie nun eine ‚zweispaltige‘ Zeile aus den Komponenten auf der rechten Seite in den E-Mail-Designbereich, in den Fußzeilenbereich der E-Mail.
Klicken Sie auf das blaue Stiftsymbol der hinzugefügten ‚zweispaltigen‘ Zeilenkomponente, um ihre Eigenschaften anzuzeigen. Ändern Sie das ‚Spaltenbreitenverhältnis‘ auf 21
Wählen Sie die linke Spalte aus und stellen Sie das ‚Spaltenlayout‘ auf ‚horizontal‘ ein (da wir 4 Bilder nebeneinander hinzufügen wollen).
Ziehen Sie in diese linke Spalte 4 Bildkomponenten von rechts (aus dem Abschnitt ‚Inhalt‘) und legen Sie sie ab.
Ziehen Sie in der rechten Spalte eine ‚Text‘-Komponente von rechts (aus dem Abschnitt ‚Inhalt‘) und legen Sie sie ab.

Das Video zeigt die obigen Schritte:

Für die Bildkomponenten:
- Wählen Sie für jedes Bild das entsprechende Symbol (Facebook, 'X' (ehemals Twitter), Google, YouTube). Laden Sie bei Bedarf Bilder hoch.
- Legen Sie die Bildbreite für jedes Symbol auf 30px fest.

Das Video zeigt die obigen Schritte:

Ihr Fußzeilendesign sieht nun wie folgt aus:

Ändern Sie die Hintergrundfarbe der Zeile in dunkelgrau: Klicken Sie auf die Zeile und das blaue Bleistiftsymbol. Wählen Sie dann im Abschnitt ‚Stil‘ der Eigenschaften der Zeile die dunkelgraue Farbe aus der visuellen Farbauswahl (oder geben Sie einen Hex-Farbcode ein).
Ändern Sie die Textfarbe des Textes '© 2022 Parana - Abbestellen' in der rechten Spalte auf weiß, indem Sie den Text markieren und auf das Dropdown-Menü neben dem 'A'-Symbol klicken.
Die weiße Farbe kann dann über eine visuelle Farbauswahl (oder durch Eingabe eines Hex-Farbcodes) ausgewählt und angewendet werden.
Bearbeiten Sie in den Eigenschaften der Zeile den Stil:
Fügen Sie Folgendes zu dem ‚benutzerdefinierten Stil‘ hinzu:
vertikale Ausrichtung: Mittig;

Die Symbole der sozialen Medien und der Text werden dann vertikal in der Mitte der Zeile statt am oberen Rand ausgerichtet.

Wir müssen nun Links zu den Symbolen für soziale Medien und zum Text für die Abmeldung hinzufügen:

Klicken Sie auf das Facebook-Symbol und fügen Sie den Link hinzu.
Geben Sie den Linknamen und eine externe Facebook-Ziel-URL ein und klicken Sie auf ‚Ok‘.
Wiederholen Sie dies für die anderen Social-Media-Symbole, um sie mit den entsprechenden URLs für 'X' (ehemals Twitter), Google und YouTube zu verknüpfen.

Schließlich fügen wir noch einen Link zum Text ‚Abbestellen‘ hinzu.

Lassen Sie uns einen neuen Link erstellen und eine externe Ziel-URL als Ziel des Links festlegen.
Aktivieren Sie auch den ‚Abbestellen-Link‘-Schalter, damit die Validierung dies als Abbestellen-Link erkennt.

Setzen Sie die Textfarbe auf Weiß (hexadezimaler Farbcode: #ffffff).

Hinweis: Vergessen Sie nicht, Ihre E-Mail regelmäßig zu speichern!

SCHRITTE:
1. Eine neue E-Mail erstellen
2. Den E-Mail-Inhalt gestalten
3. E-Mail-Kopfzeile hinzufügen
4. Textversion extrahieren
5. E-Mail testen/Vorschau anzeigen
6. Eine einfache Journey erstellen, um die E-Mail an Kontakte zu senden.